/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:21
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 15:59:11
* @Description: desc
*/
<template>
    <view class="noticeList-page">
        <!-- 头部 -->
        <c-navigation-bar :title="$t('notice.noticetileList')">
        </c-navigation-bar>
        <view class="container-box">
            <view class="line" v-for="(item,index) in dataList" :key="index" @click="getNoticeInfo()">
                <view class="left">
                    <view class="type"></view>
                </view>
                <view class="right">
                    <text>{{ item.title }}</text>
                    <text>{{ item.time }}</text>
                    <text>{{ item.introductory }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dataList: [{
                title: 'Order Arrived',
                time: 'October 02, 2021 (10:34AM)',
                introductory: 'Order #294859 has been completed and arrived at the destination address.'
            }, {
                title: 'Order Arrived',
                time: 'October 02, 2021 (10:34AM)',
                introductory: 'Order #294859 has been completed and arrived at the destination address.'
            }]
        }
    },
    methods: {
        getNoticeInfo() {
           uni.navigateTo({
				url: "/pages/myNewsDetails/myNewsDetails?id="+item.id
           });
        }
    }
}
</script>

<style lang="scss" scoped>
.noticeList-page {
  .line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
    padding-bottom: 40rpx;
    border-bottom: 1px solid #E8E6EA;

    .left {
      .type {
        width: 60rpx;
        height: 60rpx;
        background: #F4E6DD;
        border-radius: 50%;
      }
    }

    .right {
      width: calc(100% - 90rpx);

      uni-text {
        display: block;
        width: 100%;

        &:nth-child(1) {
          font-size: 34rpx;
          color: #0A1F44;
        }

        &:nth-child(2) {
          font-size: 20rpx;
          color: #999CAD;
        }

        &:nth-child(3) {
          font-size: 24rpx;
          margin-top: 15rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }

    }
  }

}
</style>